Verwaltung der React Transition Group: Koordinierte Animationssteuerung für globale Anwendungen

In der heutigen schnelllebigen digitalen Landschaft wird von Benutzeroberflächen erwartet, dass sie nicht nur funktional, sondern auch ansprechend und visuell attraktiv sind. Dynamische Übergänge und Animationen spielen dabei eine entscheidende Rolle, indem sie Benutzer durch Oberflächen führen und klares visuelles Feedback geben. Für React-Entwickler kann die effiziente Verwaltung dieser Animationen, insbesondere beim Umgang mit mehreren Komponenten, die in das DOM eintreten und es verlassen, eine erhebliche Herausforderung darstellen. Hier erweist sich React Transition Group als eine leistungsstarke und unverzichtbare Bibliothek.

Dieser umfassende Leitfaden wird sich eingehend mit den Feinheiten der React Transition Group befassen und Sie befähigen, anspruchsvolle, koordinierte Animationserlebnisse für Ihre globalen Anwendungen zu erstellen. Wir werden die Kernkonzepte, die praktische Implementierung, fortgeschrittene Techniken und Best Practices untersuchen, um sicherzustellen, dass Ihre UIs nicht nur performant, sondern auch angenehm zu bedienen sind, unabhängig vom geografischen Standort oder technischen Hintergrund Ihrer Benutzer.

Die Notwendigkeit koordinierter Animationen verstehen

Bevor wir uns mit der React Transition Group befassen, wollen wir überlegen, warum koordinierte Animationen für moderne Webanwendungen so wichtig sind. Stellen Sie sich eine E-Commerce-Plattform vor, auf der Produktbilder vergrößert werden, Filter ins Bild gleiten und Artikel mit einer subtilen Animation in den Warenkorb gelegt werden. Diese Elemente schaffen, wenn sie synchron oder nacheinander animiert werden, eine flüssige und intuitive Benutzerführung. Ohne eine ordnungsgemäße Verwaltung:

• Animationen können ruckartig oder unzusammenhängend wirken, was zu einer schlechten Benutzererfahrung führt.
• Die Leistung kann leiden, wenn mehrere Animationen nicht optimiert sind.
• Komplexe UI-Interaktionen werden schwierig zu implementieren und zu warten.
• Die Barrierefreiheit kann beeinträchtigt werden, wenn Animationen ablenkend oder verwirrend sind.

React Transition Group bietet eine robuste Lösung, indem sie eine deklarative Methode zur Verwaltung von Komponentenanimationen basierend auf deren Lebenszyklus bereitstellt. Sie vereinfacht den Prozess der Orchestrierung von Animationen für Komponenten, wenn diese gemountet, unmounted oder aktualisiert werden.

Einführung in die React Transition Group

React Transition Group ist eine schlanke Bibliothek, die eine Reihe von High-Level-Komponenten zur Verwaltung von Komponentenanimationen bereitstellt. Sie kümmert sich nicht um das eigentliche Animations-Styling selbst; stattdessen verwaltet sie den Zustand von Komponenten, während sie in das DOM eintreten und es verlassen, und ermöglicht es Ihnen, CSS-Übergänge, Animationen oder sogar JavaScript-basierte Animationsbibliotheken anzuwenden.

Die Kernidee hinter der React Transition Group ist es, den „Zustand“ einer Komponente während ihres Lebenszyklus zu verfolgen. Diese Zustände sind:

• Unmounted: Die Komponente befindet sich nicht im DOM und wird nicht animiert.
• Appearing: Die Komponente steht kurz davor, in das DOM einzutreten und durchläuft eine „appear“-Animation.
• Mounted: Die Komponente ist stabil im DOM.
• Disappearing: Die Komponente steht kurz davor, das DOM zu verlassen und durchläuft eine „disappear“-Animation.

React Transition Group stellt Komponenten bereit, die diese Zustände verwalten und während jeder Phase spezifische Klassen auf Ihre Komponenten anwenden, sodass Sie Ihre Animationen über CSS definieren können.

Schlüsselkomponenten der React Transition Group

React Transition Group bietet drei primäre Komponenten:

• <Transition />: Dies ist die grundlegende Komponente. Sie verwaltet den Übergang einer einzelnen Komponente in und aus dem DOM. Sie akzeptiert Props wie in (ein Boolean, der steuert, ob die Komponente vorhanden sein soll), timeout (die Dauer des Übergangs) und Callback-Props für verschiedene Übergangsphasen (onEnter, onEntering, onExited, etc.).
• <CSSTransition />: Dies ist eine übergeordnete Komponente, die auf <Transition /> aufbaut. Sie vereinfacht das Anwenden von CSS-Klassen auf Ihre Komponenten während der Übergänge. Sie geben einen Basis-Klassennamen an, und CSSTransition fügt automatisch spezifische Klassen für jeden Übergangszustand hinzu und entfernt sie wieder (z. B. .fade-enter, .fade-enter-active, .fade-exit, .fade-exit-active).
• <TransitionGroup />: Diese Komponente wird verwendet, um eine Gruppe von Übergangskomponenten zu verwalten. Sie ist besonders nützlich, wenn Sie eine Liste von Elementen haben, die dynamisch hinzugefügt oder entfernt werden, wie z. B. in einer Liste von Suchergebnissen oder Nachrichten. TransitionGroup funktioniert, indem sie jeder Kindkomponente ein eindeutiges key-Prop zuweist. Wenn ein Kind hinzugefügt oder entfernt wird, stellt TransitionGroup sicher, dass die entsprechenden Enter- oder Exit-Übergänge ausgelöst werden.

Implementierung einfacher Übergänge mit CSSTransition

CSSTransition ist aufgrund seiner einfachen Verwendung mit CSS oft die erste Wahl für viele gängige Animationsanforderungen. Erstellen wir einen einfachen Ein-/Ausblend-Übergang für ein Modal oder ein Dropdown-Menü.

1. Einrichten des Projekts

Stellen Sie zunächst sicher, dass Sie React installiert haben, und installieren Sie dann die React Transition Group:

            npm install react-transition-group
# oder
yarn add react-transition-group

            

              
                Copy
              
            
          

2. Erstellen des CSS

Wir definieren CSS-Klassen, die von der React Transition Group verwendet werden. Erstellen Sie eine CSS-Datei (z. B. Fade.css):

            .fade-enter {
  opacity: 0;
}

.fade-enter-active {
  opacity: 1;
  transition: opacity 300ms ease-in;
}

.fade-exit {
  opacity: 1;
}

.fade-exit-active {
  opacity: 0;
  transition: opacity 300ms ease-out;
}

            

              
                Copy
              
            
          

In diesem CSS:

• .fade-enter: Stile, die angewendet werden, wenn die Komponente zu erscheinen beginnt.
• .fade-enter-active: Stile, die während des Enter-Übergangs angewendet werden, einschließlich Dauer und Easing.
• .fade-exit: Stile, die angewendet werden, wenn die Komponente zu verschwinden beginnt.
• .fade-exit-active: Stile, die während des Exit-Übergangs angewendet werden.

Die transition-Eigenschaft in ease-in und ease-out erzeugt einen sanften Fading-Effekt.

3. Verwendung von CSSTransition in einer React-Komponente

Nun verwenden wir CSSTransition in einer React-Komponente. Stellen Sie sich eine Komponente vor, die ihre Sichtbarkeit per Klick auf einen Button umschaltet:

            import React, { useState } from 'react';
import { CSSTransition } from 'react-transition-group';
import './Fade.css'; // Import der CSS-Datei

const FadeComponent = () => {
  const [showComponent, setShowComponent] = useState(false);

  return (
    

       setShowComponent(!showComponent)}>
        Komponente umschalten
      

      
        

          Diese Komponente blendet ein und aus!
        
      
    
  );
};

export default FadeComponent;

            

              
                Copy
              
            
          

In diesem Beispiel:

• in={showComponent}: Der Übergang ist aktiv, wenn showComponent true ist.
• timeout={300}: Dies teilt der React Transition Group mit, dass der Übergang 300 Millisekunden dauert. Dies ist wichtig, damit die Bibliothek weiß, wann die aktiven Übergangsklassen entfernt werden müssen.
• classNames="fade": Das ist die Magie. React Transition Group wendet automatisch Klassen wie .fade-enter, .fade-enter-active, .fade-exit und .fade-exit-active auf das umschlossene Element an.
• unmountOnExit: Dieses Prop ist entscheidend. Wenn die Komponente austritt (in wird zu false), wird sie nach Abschluss der Exit-Animation aus dem DOM entfernt. Dies ist gut für die Leistung und verhindert, dass Elemente im DOM verbleiben.
• mountOnEnter: Umgekehrt wird die Komponente beim Eintreten (in wird zu true) dem DOM hinzugefügt und die Enter-Animation beginnt.

Um die fading-box sichtbar zu machen und Platz einzunehmen, können Sie Ihrem CSS grundlegende Stile hinzufügen:

            .fading-box {
  width: 200px;
  height: 100px;
  background-color: lightblue;
  margin-top: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 8px;
}

            

              
                Copy
              
            
          

Dieses Setup bietet einen sanften Ein- und Ausblendeffekt für unsere Komponente, wann immer der Button geklickt wird.

Verwaltung von Listen und dynamischen Mengen mit TransitionGroup

Einer der leistungsstärksten Anwendungsfälle für die React Transition Group ist die Verwaltung von Animationen für Listen von Elementen, die dynamisch hinzugefügt oder entfernt werden. Hier kommt TransitionGroup ins Spiel.

Stellen Sie sich einen Warenkorb vor, in dem Artikel hinzugefügt oder entfernt werden können. Jeder Artikel sollte eine eigene Eingangs- und Ausgangsanimation haben. TransitionGroup handhabt dies, indem es Komponenten anhand ihres key-Props identifiziert.

1. CSS für Listen-Element-Übergänge

Definieren wir eine Herein-/Herausgleit-Animation für Listenelemente. Wir verwenden einen anderen Klassennamen, sagen wir list-item.

            .list-item-enter {
  opacity: 0;
  transform: translateX(-100%);
}

.list-item-enter-active {
  opacity: 1;
  transform: translateX(0);
  transition: opacity 300ms ease-out, transform 300ms ease-out;
}

.list-item-exit {
  opacity: 1;
  transform: translateX(0);
}

.list-item-exit-active {
  opacity: 0;
  transform: translateX(100%);
  transition: opacity 300ms ease-in, transform 300ms ease-in;
}

            

              
                Copy
              
            
          

Hier animieren wir sowohl die Deckkraft als auch die horizontale Position (translateX) für einen Gleiteffekt.

2. Verwendung von TransitionGroup und CSSTransition

Erstellen wir nun eine Komponente, die eine Liste von Aufgaben verwaltet:

            import React, { useState } from 'react';
import { TransitionGroup, CSSTransition } from 'react-transition-group';
import './ListItem.css'; // Import des Listen-Element-CSS

const TodoList = () => {
  const [todos, setTodos] = useState([
    { id: 1, text: 'React Transition Group lernen' },
    { id: 2, text: 'Tolle UIs erstellen' },
  ]);
  const [newTodoText, setNewTodoText] = useState('');

  const addTodo = () => {
    if (newTodoText.trim()) {
      const newTodo = { id: Date.now(), text: newTodoText };
      setTodos([...todos, newTodo]);
      setNewTodoText('');
    }
  };

  const removeTodo = (id) => {
    setTodos(todos.filter(todo => todo.id !== id));
  };

  return (
    

      
Meine Todos
       setNewTodoText(e.target.value)}
        placeholder="Ein neues Todo hinzufügen" 
      />
      Todo hinzufügen

      
        {todos.map(todo => (
          
            

              {todo.text}
               removeTodo(todo.id)}>X
            
          
        ))}
      
    
  );
};

export default TodoList;

            

              
                Copy
              
            
          

Und etwas CSS für die Liste selbst:

            .todo-list {
  list-style: none;
  padding: 0;
  margin-top: 20px;
}

.todo-item {
  background-color: #f0f0f0;
  padding: 10px;
  margin-bottom: 10px;
  border-radius: 5px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.todo-item button {
  background-color: #ff6666;
  color: white;
  border: none;
  padding: 5px 10px;
  border-radius: 3px;
  cursor: pointer;
}

            

              
                Copy
              
            
          

Wichtige Punkte hier:

• <TransitionGroup component="ul">: Wir weisen TransitionGroup an, als ein <ul>-Element gerendert zu werden. Dies ist wichtig für die semantische Korrektheit und für die Anwendung von Stilen auf den Listencontainer.
• key={todo.id}: Jedes Kind innerhalb von TransitionGroup MUSS einen eindeutigen key haben. So verfolgt TransitionGroup, welche Elemente eintreten, austreten oder bleiben.
• <CSSTransition>: Jedes <li>-Element ist in eine CSSTransition-Komponente gehüllt, die die list-item-Übergangsklassen anwendet.

Wenn Sie ein Todo hinzufügen oder entfernen, erkennt TransitionGroup die Änderung der Keys und weist die entsprechende CSSTransition-Komponente an, das Element ein- oder auszublenden.

Fortgeschrittene Konzepte und Anpassungen

Während CSSTransition viele gängige Anwendungsfälle abdeckt, bietet die React Transition Group auch die untergeordnete Komponente <Transition /> für eine feingranularere Steuerung und Integration mit anderen Animationsbibliotheken.

Verwendung der <Transition />-Komponente

Die <Transition />-Komponente bietet Zugriff auf alle Übergangszustände über Callback-Props. Dies ermöglicht es Ihnen, komplexe JavaScript-Animationen auszulösen oder mit Bibliotheken wie GSAP, Framer Motion oder React Spring zu integrieren.

            import React, { useState } from 'react';
import { Transition } from 'react-transition-group';

const duration = 300;

const defaultStyle = {
  transition: `opacity ${duration}ms ease-in-out`,
  opacity: 0,
};

const transitionStyles = {
  entering: { opacity: 1 },
  entered: { opacity: 1 },
  exiting: { opacity: 0 },
  exited: { opacity: 0 },
};

const AnimatedBox = () => {
  const [inProp, setInProp] = useState(false);

  return (
    

       setInProp(!inProp)}>Übergang umschalten
      
        {state => (
          

            Ich werde animiert!
          
        )}
      
    
  );
};

export default AnimatedBox;

            

              
                Copy
              
            
          

In diesem Beispiel:

• Die children von <Transition /> ist eine Funktion, die den aktuellen state (entering, entered, exiting, exited) erhält.
• Wir definieren Basisstile und Übergangsstile für jeden Zustand.
• Wir wenden diese Stile dynamisch basierend auf dem bereitgestellten state an.

Dieser Ansatz bietet maximale Flexibilität. Sie könnten die Inline-Stile durch Aufrufe an GSAPs TweenMax oder andere Animationsbibliotheken innerhalb dieser Callback-Funktionen ersetzen.

Callback-Props für eine feingranulare Steuerung

Sowohl <Transition /> als auch <CSSTransition /> bieten einen reichhaltigen Satz von Callback-Props:

• onEnter(node, isAppearing): Wird aufgerufen, wenn das Element zum ersten Mal gemountet oder dem DOM hinzugefügt wird.
• onEntering(node, isAppearing): Wird aufgerufen, wenn das Element gerade in das DOM übergeht (nach onEnter).
• onEntered(node, isAppearing): Wird aufgerufen, wenn das Element den Eintritt in das DOM abgeschlossen hat.
• onExit(node): Wird aufgerufen, wenn das Element aus dem DOM übergeht.
• onExiting(node): Wird aufgerufen, wenn das Element gerade aus dem DOM übergeht (nach onExit).
• onExited(node): Wird aufgerufen, wenn das Element den Austritt aus dem DOM abgeschlossen hat und unmounted ist.

Diese Callbacks sind von unschätzbarem Wert für:

• Das Auslösen von JavaScript-basierten Animationen.
• Das Ausführen von Aktionen nach Abschluss einer Animation, wie z. B. das Abrufen von Daten oder das Aktualisieren des Zustands.
• Die Implementierung von gestaffelten Animationen.
• Die Integration mit Animationsbibliotheken von Drittanbietern.

Anpassen des Übergangsverhaltens

React Transition Group bietet Props zur Anpassung des Übergangsverhaltens:

• appear={true}: Wenn dies bei einer CSSTransition oder Transition auf true gesetzt ist, wird auch die Enter-Animation angewendet, wenn die Komponente initial gemountet wird, falls das in-Prop bereits true ist.
• enter={false} / exit={false}: Sie können Enter- oder Exit-Animationen unabhängig voneinander deaktivieren.
• addEndListener(node, done): Dieses Prop bei <Transition /> ermöglicht es Ihnen, sich in das Ende des Übergangs einzuklinken und einen bereitgestellten done-Callback aufzurufen, wenn die Animation abgeschlossen ist. Dies ist unerlässlich für die Verwendung benutzerdefinierter Animationsbibliotheken, die Ereignisse nicht auf eine Weise auslösen, die die React Transition Group erwartet.

Best Practices für globale Anwendungen

Bei der Entwicklung von Anwendungen für ein globales Publikum müssen Animationen mit Sorgfalt behandelt werden, um Barrierefreiheit, Leistung und ein konsistentes Erlebnis über verschiedene Geräte und Netzwerkbedingungen hinweg zu gewährleisten.

1. Optimieren Sie die Animationsleistung:
   • CSS Transforms und Opacity: Verwenden Sie nach Möglichkeit CSS-Eigenschaften wie transform (z. B. translateX, scale) und opacity für Animationen. Diese Eigenschaften können oft vom Browser hardwarebeschleunigt werden, was zu einer flüssigeren Leistung führt. Vermeiden Sie das Animieren von Eigenschaften, die Layout-Neuberechnungen auslösen (z. B. width, height, margin), wenn die Leistung entscheidend ist.
   • Halten Sie Übergänge schlank: Lange oder komplexe Animationen können sich negativ auf die Leistung auswirken, insbesondere auf leistungsschwächeren Geräten oder bei langsameren Netzwerken. Zielen Sie auf schnelle und wirkungsvolle Animationen ab, typischerweise unter 500ms.
   • Verwenden Sie unmountOnExit und mountOnEnter mit Bedacht: Obwohl diese Props die Leistung verbessern, indem sie Komponenten aus dem DOM entfernen, stellen Sie sicher, dass sie keine wahrnehmbaren Verzögerungen verursachen, wenn Benutzer häufig die Sichtbarkeit umschalten. Bei sehr schnellem Umschalten könnten Sie erwägen, die Komponenten gemountet, aber unsichtbar zu lassen.
   • Debounce und Throttle: Wenn Animationen durch Benutzereingaben (wie Scrollen oder Größenänderung) ausgelöst werden, verwenden Sie Debouncing- oder Throttling-Techniken, um übermäßige Neu-Renderings und Animationen zu vermeiden.
2. Priorisieren Sie die Barrierefreiheit:
   • Respektieren Sie prefers-reduced-motion: Benutzer mit Bewegungsempfindlichkeit sollten die Möglichkeit haben, Animationen zu deaktivieren oder zu reduzieren. Sie können dies mit Media Queries in Ihrem CSS erreichen:

                 @media (prefers-reduced-motion: reduce) {
       .fade-enter-active,
       .fade-exit-active,
       .list-item-enter-active,
       .list-item-exit-active {
         transition: none;
       }
       /* Potenziell einfachere oder keine Animationen anwenden */
     }
     
                 
     
                   
                     Copy
                   
                 
               

     React Transition Group respektiert die von Ihnen definierten CSS-Eigenschaften. Wenn Ihr CSS also Übergänge basierend auf dieser Media Query deaktiviert, wird die Animation entsprechend reduziert oder entfernt.
   • Vermeiden Sie übermäßig komplexe Animationen: Stellen Sie sicher, dass Animationen nicht vom Inhalt ablenken oder das Lesen von Text erschweren. Beispielsweise können übermäßiges Parallax-Scrolling oder schnell blinkende Elemente problematisch sein.
   • Bieten Sie klare visuelle Hinweise: Animationen sollten UI-Interaktionen ergänzen und verdeutlichen, nicht verschleiern.
3. Berücksichtigen Sie Internationalisierung (i18n) und Lokalisierung (l10n):
   • Textausdehnung/-verkürzung: Sprachen variieren in der Länge. Animationen, die auf festen Breiten oder Höhen basieren, können bei der Anzeige von längerem oder kürzerem Text brechen. Verwenden Sie flexibles CSS oder stellen Sie sicher, dass Ihre Animationen Textvariationen berücksichtigen. Zum Beispiel ist das Animieren von Deckkraft und Transformation oft robuster als das Animieren der Breite.
   • Schreibrichtung (LTR/RTL): Wenn Ihre Anwendung Rechts-nach-Links (RTL)-Sprachen (wie Arabisch oder Hebräisch) unterstützt, stellen Sie sicher, dass Ihre Animationen dies berücksichtigen. Verwenden Sie für Gleitanimationen transform: translateX() und bedenken Sie die Richtung. CSS-Transformationen sind im Allgemeinen richtungsunabhängig, aber explizite Positionierungen müssen möglicherweise angepasst werden. Beispielsweise kann eine Links-nach-Rechts-Gleitbewegung in RTL-Layouts zu einer Rechts-nach-Links-Gleitbewegung werden.
   • Kulturelle Sensibilität: Obwohl Animationsstile im Allgemeinen universell sind, achten Sie auf Animationen, die in bestimmten Kulturen als aggressiv oder beunruhigend empfunden werden könnten. Bei gängigen UI-Animationen wie Fades und Slides ist dies jedoch selten ein Problem.
4. Konsistente Animationen über Plattformen hinweg:
   • Verwenden Sie konsistente timeout-Werte und Easing-Funktionen für ähnliche Arten von Übergängen, um ein einheitliches Gefühl in Ihrer gesamten Anwendung zu erhalten.
   • Testen Sie Ihre Animationen auf verschiedenen Geräten und Browsern, um sicherzustellen, dass sie wie erwartet gerendert werden.
5. Struktur für die Wartbarkeit:
   • Organisieren Sie Ihr übergangsbezogenes CSS in separaten Dateien oder Modulen.
   • Erstellen Sie wiederverwendbare Übergangskomponenten (z. B. eine FadeTransition-Komponente), um Code-Wiederholungen zu vermeiden.

Reale internationale Beispiele

Lassen Sie uns kurz darauf eingehen, wie diese Prinzipien auf globalen Plattformen angewendet werden:

• Google-Suchergebnisse: Wenn Sie suchen, erscheinen die Ergebnisse oft mit einem subtilen Einblenden und leichter Staffelung, wodurch sich der Ladevorgang flüssiger anfühlt. Dies wird mit Animationsbibliotheken verwaltet, die wahrscheinlich mit Konzepten der Transition Group integriert sind.
• Slack-Benachrichtigungen: Neue Nachrichten gleiten oft von der Seite oder von unten mit einem Fade herein und geben einen klaren Hinweis auf neue Aktivitäten, ohne aufdringlich zu sein.
• E-Commerce-Produktgalerien: Beim Navigieren zwischen Produktbildern leiten Übergänge (wie Überblendungen oder Slides) das Auge des Benutzers und schaffen ein hochwertiges Gefühl. Frameworks verwenden oft Transition Groups, um diese sequenziellen Animationen zu verwalten.
• Single Page Applications (SPAs): Viele SPAs, wie die mit React, Angular oder Vue erstellten, verwenden Routenübergänge, um den Eintritt und Austritt ganzer Seitenkomponenten zu animieren. Dies bietet ein desktop-ähnliches Erlebnis und stützt sich stark auf das Übergangsmanagement.

Fazit

React Transition Group ist ein unverzichtbares Werkzeug für jeden React-Entwickler, der ansprechende und dynamische Benutzeroberflächen erstellen möchte. Durch das Verständnis seiner Kernkomponenten – Transition, CSSTransition und TransitionGroup – und die Nutzung der Kraft von CSS- oder JavaScript-Animationen können Sie anspruchsvolle Übergänge gestalten, die das Benutzererlebnis verbessern.

Denken Sie daran, Leistung und Barrierefreiheit zu priorisieren, insbesondere wenn Sie für ein globales Publikum entwickeln. Indem Sie sich an Best Practices halten, wie z. B. das Optimieren von Animationen, das Respektieren von Benutzereinstellungen für reduzierte Bewegung und die Berücksichtigung von Internationalisierungsfaktoren, können Sie sicherstellen, dass Ihre Anwendungen Benutzern weltweit ein nahtloses und angenehmes Erlebnis bieten. Die Beherrschung der koordinierten Animationssteuerung mit der React Transition Group wird zweifellos Ihre Fähigkeiten in der Frontend-Entwicklung und die Qualität Ihrer Anwendungen steigern.

Beginnen Sie noch heute damit, mit diesen Konzepten in Ihren Projekten zu experimentieren und das volle Potenzial animierter UIs auszuschöpfen!